<template>
<div class="container">
  <form  class="settasks">
    <h3>配置task</h3>
    <div class="radio">
      <div class="useMr">是否使用MapReduce:
        <el-radio v-model="radioMr"  label="true">Yes</el-radio>
        <el-radio v-model="radioMr" label="false">No</el-radio>
      </div>   
      <div class="useStringUtils">是否使用StringUtils:
        <el-radio v-model="radioSU" label="true" >Yes</el-radio>
        <el-radio v-model="radioSU" label="false">No</el-radio>
      </div> 
      <div class="allowInputFormat">是否小文件合并:
        <el-radio v-model="radioIF" label="true" >Yes</el-radio>
        <el-radio v-model="radioIF" label="false">No</el-radio>
      </div>  
    </div>
        
    <div class="useFileType">使用的输入文件类型：
        <el-select v-model="value" placeholder="请选择文件类型">
        <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        </el-option>
        </el-select>
        <el-button @click="submit">提交</el-button>
    </div>
  </form>  
  
  <div class="getTaskInfo">
    <h3>获取当前task所有信息</h3>
    <el-button type="info" round @click="getInfo" class="getInfo">一键获取</el-button>
     <el-table
     :data="tasks"
     border
     style="width: 100%">
    <el-table-column
      prop="id"
      label="ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="type"
      label="任务类型"
      width="180">
    </el-table-column>
    <el-table-column
      prop="fileType"
      label="文件类型"
      width="180">
    </el-table-column>
    <el-table-column
      prop="time"
      label="运行时间"
      width="180">
    </el-table-column>
    </el-table>
  </div>
  
  <div class="showEcharts" style="width: 500px;height: 400px" id="main">

  </div>

</div>
</template>

<script>
  import echarts from 'echarts';
  import axios from 'axios';
  export default {
    mounted(){
      this.echartsInit()
    },
    data () {
      return {
        tasks: [{
          id:'24',
          type:'111',
          time:'35952',
          fileType:'2'
        },{
          id:'25',
          type:'111',
          time:'36888',
          fileType:'2'
        },{
          id:'28',
          type:'101',
          time:'7423',
          fileType:'1'
        },{
          id:'30',
          type:'100',
          time:'88787',
          fileType:'2'
        },{
          id:'',
          type:'',
          time:'4545',
          fileType:'1'
        }
        ],
        radioMr: "true",
        radioSU: "true",
        radioIF: "true",
        options: [{
        value: '0',
        label: '小'
        }, {
        value: '1',
        label: '中'
        }, {
        value: '2',
        label: '大'
        }],
        value: '',
      };
    },
    methods: {
      submit:()=>{
        axios.post('http://localhost:8081/tasks/config',{
          MR:this.radioMr,
          StringUtils:this.radioSU,
          InputFormat:this.radioIF,
          FileType:this.value
          })
          .then((res)=>{
            console.log(res.resMsg)
          })
      },
      getInfo:()=>{
        axios.get("http://localhost:8081/task/list")
        .then((res)=>{
          console.log(res.data)
          this.tasks = res.data
        })
      },
      echartsInit(){
        let arr = this.tasks.map((item)=>{return item.time})
        console.log(arr)
        echarts.init(document.getElementById('main')).setOption({
          xAxis: {
        type: 'category',
        data: [this.tasks.map((item)=>{return item.fileType})]
    },
      yAxis: {
        type: 'value'
    },
    series: [{
        data: [this.tasks.map((item)=>{return item.time})],
        type: 'line'
    }]
        })
       }
    }
  }
</script>

<style scoped>
    .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .container>* {
      border: 1px grey solid;
      border-radius: 2%;
      padding: 10px;
      margin-bottom: 15px;
    }
    .radio {
      display: flex;
    }
    .settasks *{
      margin :0 10px 10px;
    }

    .getTaskInfo>h3{
      margin: 0 0 10px;
    }
    .getInfo {
      margin-bottom: 10px;
    }
</style>